<%@ page language="java" contentType="text/html; charset=utf-8" 
    pageEncoding="utf-8"  isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebChat</title>

   <!--
    JQuery EasyUI 1.5.x of Insdep Theme 1.0.0
    演示地址：https://www.insdep.com/example/
    下载地址：https://www.insdep.com
    问答地址：https://bbs.insdep.com

    项目地址：http://git.oschina.net/weavors/JQuery-EasyUI-1.5.x-Of-Insdep-Theme

    QQ交流群：184075694 （优先发布更新主题及内测包）
-->
<!--
    注意样式表优先级
    主题样式必须在easyui组件样式后。
-->

<link rel="shortcut icon" href="/static/images/logo2.ico" />

<link href="/static/plugins/easyui/themes/insdep/easyui.css" rel="stylesheet" type="text/css">


<!--
    themes/insdep/easyui_animation.css
    Insdep对easyui的额外增加的动画效果样式，根据需求引入或不引入，此样式不会对easyui产生影响
-->
<link href="/static/plugins/easyui/themes/insdep/easyui_animation.css" rel="stylesheet"
	type="text/css">

<!--
    themes/insdep/easyui_plus.css
    Insdep对easyui的额外增强样式,内涵所有 insdep_xxx.css 的所有组件样式
    根据需求可单独引入insdep_xxx.css或不引入，此样式不会对easyui产生影响
-->
<link href="/static/plugins/easyui/themes/insdep/easyui_plus.css" rel="stylesheet"
	type="text/css">

<!--
    themes/insdep/insdep_theme_default.css
    Insdep官方默认主题样式,更新需要自行引入，此样式不会对easyui产生影响
-->
<link href="/static/plugins/easyui/themes/insdep/insdep_theme_default.css" rel="stylesheet"
	type="text/css">

<!--
    themes/insdep/icon.css
    美化过的easyui官方icons样式，根据需要自行引入
-->
<link href="/static/plugins/easyui/themes/insdep/icon.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="/static/plugins/easyui/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/plugins/easyui/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/static/plugins/easyui/themes/insdep/jquery.insdep-extend.min.js"></script>
<script src="/static/plugins/layer/layer.js"></script>
<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
<script type="text/javascript" src="/static/source/js/websocket.js"></script>

</head>
<body>

	<div id="master-layout">
        <div data-options="region:'north',border:false,bodyCls:'theme-header-layout'">
        	<div class="theme-navigate">
                <input float="right" class="easyui-searchbox navigate-search" data-options="prompt:'输入搜索的用户名',searcher:doSearch" style="width:200px"></input>
                
				<div class="right">
					<a href="#" class="easyui-menubutton theme-navigate-user-button"
						data-options="menu:'.theme-navigate-user-panel'">${sessionScope.user.userName }</a>

					<div class="theme-navigate-user-panel">
						<dl>
							<dd>
								<img src="${sessionScope.user.avatarUrl }" onerror="this.src='/static/plugins/easyui/themes/insdep/images/portrait86x86.png'" width="86"
									height="86" id="avatar_modify"> <b class="badge-prompt">${sessionScope.user.userName }</b> 
									<span>昵称:&nbsp;${sessionScope.user.nickname }</span>
							</dd>
							<dt>
								<a class="theme-navigate-user-modify" id="pw_modify">修改密码</a>
								<a class="theme-navigate-user-modify" id="user_modify">修改资料</a>
								<a class="theme-navigate-user-logout" href="/userlogin/logout.do">注销</a>
							</dt>
						</dl>
					</div>
				</div>
			</div>
        </div>
        
        <!-- 好友添加窗口开始 -->
		<div id="friendAddWindow" class="easyui-window" title="添加好友" data-options="modal:true,collapsible:false,closed:true,maximizable:false,minimizable:false,resizable:false" style="width:550px;height:400px;padding:10px;">
			<table id="searchdg" class="easyui-datagrid" style="width:100%;height:100%"
					data-options="singleSelect:true,fit:true,fitColumns:true,collapsible:true">
				<thead>
					<tr>
						<th data-options="field:'userName'" width="150">用户名</th>
						<th data-options="field:'nickname'" width="150">昵称</th>
					</tr>
				</thead>
			</table>
		</div>
		<script type="text/javascript">
			$(function(){
				$("#searchdg").datagrid({
			        onClickRow : function(index, row){
			        	$.messager.confirm('添加好友', '你确定要请求添加该好友吗', function(r){
							if (r){
								request_friend(row.userId);
								
								layer.msg("请求已发出", {
					    			time : 3000
					    		});
							}
						});
			        }
			});
			});
			function doSearch(value) {
				if (value == null || "" == value) {
					return;
				}
				$("#friendAddWindow").window('open');
				
				$('#searchdg').datagrid('options').url = "/user/searchUserInfo.do";
				
				$('#searchdg').datagrid('load',{
					userName: value,
				});
			}
		</script>		
		<!-- 好友添加窗口结束 -->

        <!--开始左侧菜单-->
        <div data-options="region:'west',border:false" style="width:200px;">
            <!--正常菜单--> 
				<div class="easyui-layout" data-options="border:false,fit:true"> 
					<ul id="friendtt" class="easyui-tree" data-options="
							url: '/user/getUserFriends.do',
							method: 'post',
							animate: true,
							dnd : true,
							onContextMenu: function(e,node){
								e.preventDefault();
								$(this).tree('select',node.target);
								$('#friendmm').menu('show',{
									left: e.pageX,
									top: e.pageY
								});
							}
					"></ul>
                </div>
        </div>
        <div id="friendmm" class="easyui-menu" style="width:120px;">
			<div onclick="deleteFriend()">删除好友</div>
			<div class="menu-sep"></div>
			<div onclick="appendToBlack()">加到黑名单</div>
			<div onclick="moveOutBlack()">移出黑名单</div>
			<div class="menu-sep"></div>
			<div onclick="createGroup()">新建分组</div>
			<div onclick="changeGroup()">修改分组</div>
			<div onclick="deleteGroup()">删除分组</div>
			<div class="menu-sep"></div>
			<div onclick="createRoom()">新建聊天</div>
			<div onclick="invite()">邀请聊天</div>
		</div>
        <script type="text/javascript">
        	var fromId;
        	$(function() {
        		$('#friendtt').tree({
        		     onBeforeDrop : function (target, source, point) {
        		    	 fromId = $('#friendtt').tree('getParent',source.target).groupId;
        		         if (point === 'append' && $(this).tree('getNode', target).groupId >= -1 && source.userId && fromId != -2) {
        		            return true;
        		         }
        		         return false;
        		     },
        		     onDrop : function(target, source, point) {
        		    	 $.post("/group/moveMemberGroup.do", {
 							userId : source.userId,
 							fromId : fromId,
 							toId : $('#friendtt').tree('getNode', target).groupId
 						});
        		     }
        		 });
        	});

        	function invite() {
                var t = $("#friendtt");
                var node = t.tree('getSelected');
                if (node.userId == null || "" == node.userId) {
                    return;
                }
                id = $('#tabs').tabs('getSelected').panel('options').id;
                $.post("/room/invite.do", {
                    userId : node.userId,
                    roomId : id
                });
                layer.msg("请求已发出", {
                    time : 3000
                });
			}


        	var baseRoomUrl = "showRoom.do"
        	function createRoom() {
                $.post("/room/createRoom.do",function(result) {
                    if (result.error) {
                        layer.msg("创建房间失败", {
                            time : 3000
                        });
					} else if (result.success) {
						url = baseRoomUrl + "?roomId=" + result.success;
						f_addTab("聊天室"+result.success, result.success, "聊天室"+result.success, url);
					}
				});
            }

        	// 按钮互斥
        	function deleteFriend() {
        		var t = $("#friendtt");
        		var node = t.tree('getSelected');
        		if (node.userId == null || "" == node.userId) {
        			return;
        		}
        		$.messager.confirm('删除好友', '你确定要请求删除好友' + node.text + '吗', function(r){
					if (r){
						$.post("/user/deleteFriend.do", {
							userId : node.userId
						},function(data){
							if (data.message == "修改成功") {
								layer.msg("删除成功", {
					    			time : 3000
					    		});
								t.tree('reload');
							} else {
								layer.msg("删除失败", {
					    			time : 3000
					    		});
							}
						});
					}
				});
        	}
        	function appendToBlack() {
        		var t = $("#friendtt");
        		var node = t.tree('getSelected');
        		if (node.userId == null || "" == node.userId) {
        			return;
        		}
        		$.messager.confirm('黑名单', '你确定要添加' + node.text + '到黑名单吗', function(r){
					if (r){
						$.post("/user/appendToBlack.do", {
							userId : node.userId
						},function(data){
							if (data.message == "修改成功") {
								layer.msg("添加成功", {
					    			time : 3000
					    		});
								t.tree('reload');
							} else {
								layer.msg("添加失败", {
					    			time : 3000
					    		});
							}
						});
					}
				});
        	}
        	function moveOutBlack() {
        		var t = $("#friendtt");
        		var node = t.tree('getSelected');
        		if (node.userId == null || "" == node.userId) {
        			return;
        		}
        		$.messager.confirm('黑名单', '你确定要移除' + node.text + '出黑名单吗', function(r){
					if (r){
						$.post("/user/moveOutBlack.do", {
							userId : node.userId
						},function(data){
							if (data.message == "修改成功") {
								layer.msg("移除成功", {
					    			time : 3000
					    		});
								t.tree('reload');
							} else {
								layer.msg("移除失败", {
					    			time : 3000
					    		});
							}
						});
					}
				});
        	}
        	function createGroup() {
        		var t = $("#friendtt");
        		var node = t.tree('getSelected');
        		$.messager.prompt('', '请输入新的分组名', function(groupName){
    				if (groupName){
    					$.post("/group/createGroup.do", {
    						'groupName' : groupName
						},function(data){
							if (data.result == "success") {
								layer.msg("添加成功", {
					    			time : 3000
					    		});
								t.tree('reload');
							} else {
								layer.msg("添加失败", {
					    			time : 3000
					    		});
							}
						});
    				}
    			});
        	}
        	function changeGroup() {
        		var t = $("#friendtt");
        		var node = t.tree('getSelected');
        		$.messager.prompt('', '请输入新的分组名', function(newName){
    				if (newName){
    					$.post("/group/changeGroup.do", {
    						'groupId' : node.groupId,
    						'newName' : newName
						},function(data){
							if (data.result == "success") {
								layer.msg("修改成功", {
					    			time : 3000
					    		});
								t.tree('reload');
							} else {
								layer.msg("修改失败", {
					    			time : 3000
					    		});
							}
						});
    				}
    			});
        	}
        	function deleteGroup() {
        		var t = $("#friendtt");
        		var node = t.tree('getSelected');
        		$.messager.confirm('', '你确定要删除该分组吗', function(r){
    				if (r){
    					$.post("/group/deleteGroup.do", {
    						'groupName' : node.text,
						},function(data){
							if (data.result == "success") {
								layer.msg("删除成功", {
					    			time : 3000
					    		});
								t.tree('reload');
							} else {
								layer.msg("删除失败", {
					    			time : 3000
					    		});
							}
						});
    				}
    			});
        	}
        </script>
        <!--结束左侧菜单-->

		<div region="center">
			<div id="tabs" class="easyui-tabs" fit="true" border="false">
			</div>
		</div>
		<script type="text/javascript">
			$(function () {
                $('#tabs').tabs({
                    onBeforeClose: function(title,index){
                        if (ignore) {
                            return true;
						}
                        var result = confirm('你确认想要关闭'+title);
                        if (result) {
                            id = $('#tabs').tabs('getTab',index).panel('options').id;
                            $.post("/room/leaveRoom.do", {
                                'roomId' : id ,
                            });
						}
						return result;
                    }
                });
            });

			function reloadRoomMember(roomId) {
			    var room = document.getElementById("聊天室"+roomId);
			    if (!room) {
			        return;
				}
                room.contentWindow.refreshMember();
			}

			function loadText(roomId, text) {
                var room = document.getElementById("聊天室"+roomId);
                if (!room) {
                    return;
                }
                room.contentWindow.appendText(text);
			}

			var ignore = false;
			function closeRoom(json) {
                ignore = true;
                var tab = $('#tabs').tabs('close',"聊天室"+json.roomId);
                ignore = false;
			}

            function f_addTab(name,tabId,title,url){
                if (url == null) {
                    return;
                }
                if ($("#tabs").tabs('exists', title)) {
                    $('#tabs').tabs('select', title);
                } else {
                    $('#tabs').tabs('add',{
                        id:tabId,
                        title:title,
                        content:'<iframe id="'+name+'" src="'+url+'" frameborder="0" style="height:100%;width:100%;" "></iframe>',
                        closable:true,//tab显示关闭键
                        cache:true //设置缓存，如果为false，在每次选中所选的tab时，都会加载一次页面内容
                    });
                }
            }
		</script>

		<div id="infoModifyWindow" class="easyui-window" title="修改资料" data-options="modal:true,collapsible:false,closed:true,maximizable:false,minimizable:false,resizable:false" style="width:550px;height:400px;padding:10px;">
			<div style="width: 400px; padding: 30px 60px;">
				<form id="infoModifyForm" method="post"
					action="/user/userModify.do">
					<div style="margin-bottom: 20px">
						<input class="easyui-textbox theme-textbox-radius validatebox-readonly "
							name="nickname" value="${sessionScope.user.nickname }" style="width: 100%"
							data-options="required:true, label:'昵称:'" />
					</div>
				</form>
				<div style="padding: 5px 0">
					 <a href="javascript:void(0)" class="easyui-linkbutton" id="infoModifySub"
						style="width: 80px; float: right">提交更改</a>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			$(function(){
				$('#infoModifyForm').form({      
			        success:function(data){     // 提交成功后的回调函数。  
			        	layer.msg(JSON.parse(data).message, {
			    			time : 3000
			    		});			             
			        }  
			    }); 
				$("#infoModifySub").click(function() {
					$("#infoModifyForm").submit();
				});
			});
		</script>
		
		<!-- 密码修改窗口开始 -->
		<div id="passwordModifyWindow" class="easyui-window" title="修改密码" data-options="modal:true,collapsible:false,closed:true,maximizable:false,minimizable:false,resizable:false" style="width:550px;height:400px;padding:10px;">
			<div style="width: 400px; padding: 30px 60px;">
				<form id="passwordModifyForm" method="post"
					action="/user/passwordModify.do">
					<div id="password-panel">
						<div style="margin-bottom: 20px">
							<input
								class="easyui-passwordbox easyui-validatebox theme-textbox-radius" name="password"
								id="ipassword1" validType="length[1,16]"  iconWidth="28" style="width: 100%"
								data-options="label:'密码:'" />
						</div>
						<div style="margin-bottom: 20px">
							<input
								class="easyui-passwordbox easyui-validatebox theme-textbox-radius"
								id="ipassword2" style="width: 100%"  iconWidth="28" data-options="label:'重复:'"
								validType="equalTo['#ipassword1']" invalidMessage="两次输入密码不匹配" />
						</div>
					</div>
				</form>
				<div style="padding: 5px 0">
					 <a href="javascript:void(0)" class="easyui-linkbutton" id="passwordModifySub"
						style="width: 80px; float: right">提交更改</a>
				</div>
			</div>
		</div>
		<script type="text/javascript">
		$(function(){
			$('#passwordModifyForm').form({      
		        success:function(data){     // 提交成功后的回调函数。  
		        	layer.msg(JSON.parse(data).message, {
		    			time : 3000
		    		});			             
		        }  
		    }); 
			$("#passwordModifySub").click(function() {
				$("#passwordModifyForm").submit();
			});
		});
		</script>		
		<!-- 密码修改窗口结束 -->
		
		<!-- 图片修改窗口开始 -->
		<div id="avatarModifyWindow" class="easyui-window" title="修改头像" data-options="modal:true,collapsible:false,closed:true,maximizable:false,minimizable:false,resizable:false" style="width:550px;height:400px;padding:10px;" align="center">
		<div style="width: 200px; padding: 30px 60px;" align="center">
		    <div id="Imgdiv">
		        <img id="Img" width="200px" height="200px"/>
		    </div>
			<form id="avatarModifyForm" enctype="multipart/form-data" action="/user/avatarModify.do" method="post">
		        <input class="easyui-filebox" style="width:100%" data-options="onChange:change_photo, buttonText:'选择头像'" id="avatarUpload" name="avatarUpload"/><br/> 
		        <input class="easyui-linkbutton" type="submit" value="提交" style="width:100%;height:35px" > <br/>
		    </form>
		</div>
		</div>
		<script type="text/javascript" src="/static/source/js/previewimage.js"></script>
		<script type="text/javascript">
			$('#avatarModifyForm').form({      
		        success:function(data){     // 提交成功后的回调函数。  
		        	layer.msg(JSON.parse(data).message, {
		    			time : 3000
		    		});			             
		        }  
		    }); 
			function change_photo(){
				PreviewImage($("input[name='avatarUpload']")[0], 'Img', 'Imgdiv');
		    }
		</script>		
		<!-- 图片修改窗口结束 -->
    </div>
	<script type="text/javascript">
	$(function(){
			connect();	
		
			/*布局部分*/
			$('#master-layout').layout({
				fit:true/*布局框架全屏*/
			});   
			
			    $("#menu a").click(function(){
			        return false;    //使超链接的单击事件失效
			    });


            /*右侧菜单控制部分*/

            var left_control_status=true;
            var left_control_panel=$("#master-layout").layout("panel",'west');

            $(".left-control-switch").on("click",function(){
                if(left_control_status){
                    left_control_panel.panel('resize',{width:70});
                    left_control_status=false;
                    $(".theme-left-normal").hide();
                    $(".theme-left-minimal").show();
                }else{
                    left_control_panel.panel('resize',{width:200});
                    left_control_status=true;
                    $(".theme-left-normal").show();
                    $(".theme-left-minimal").hide();
                }
                $("#master-layout").layout('resize', {width:'100%'})
            });

            /*右侧菜单控制结束*/


			//userful
			$("#user_modify").on("click",function(){
                $('.theme-navigate-user-panel').menu('hide');
                $('#infoModifyWindow').window('open');
            }); 
			$("#pw_modify").on("click",function(){
                $('.theme-navigate-user-panel').menu('hide');
                $('#passwordModifyWindow').window('open');
            }); 
			$("#avatar_modify").on("click",function(){
                $('.theme-navigate-user-panel').menu('hide');
                $('#avatarModifyWindow').window('open');
            }); 
		});
		
			$.extend($.fn.validatebox.defaults.rules, {
		    /*必须和某个字段相等*/
		    	equalTo: { validator: function (value, param) { return $(param[0]).val() == value; }, message: '字段不匹配' }
		   });
		
    </script>
</body>
</html>